<template>
  <div class="tcl-orderList">
    <el-card shadow="never" style="margin-top: 10px;">
      <div class="card-1">
        <searchPanel @refresh="getData('reset')" >
          <!-- 查询面板 -->
          <template v-slot:search>
            <el-form :inline="true" :model="listSearch" class="demo-form-inline" label-width="120px">
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="产品编码">
                    <el-select multiple v-model="listSearch.condition.productCodeList" style="width:100%"
                      @change="getData('search')" placeholder="请选择产品" filterable clearable collapse-tags
                      collapse-tags-tooltip>
                      <el-option v-for="item in listCollect.productList" :key="item.id" :value="item.key"
                        :label="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
               
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="订单号">
                    <el-input v-model="listSearch.condition.orderNo" clearable placeholder="请输入订单号"
                      @keyup.enter.native="getData('search')" @clear="getData('search')" />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="手机号">
                    <el-input v-model="listSearch.condition.mobile" clearable placeholder="请输入手机号"
                      @keyup.enter.native="getData('search')" @clear="getData('search')" />
                  </el-form-item>
                </el-col>
              
              
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="订单状态">
                    <el-select v-model="listSearch.condition.orderStatusList" @change="getData('search')" style="width:100%" multiple
                      placeholder="请选择订单状态" clearable>
                      <el-option v-for="(item, index) in orderProcessStatus1" :key="item" :value="index"
                        :label="item"></el-option>
                    </el-select>
                    <!-- <BlackSelect v-model:select-value="listSearch.condition.orderStatus" :options="orderProcessStatus1" @my-change="getData('search')" :multiple="true"></BlackSelect> -->
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="订单时间">
                    <TimePicker v-model:operateTime="operateTime" style="width: 100%;" @timeChange="timeChange">
                    </TimePicker>
                  </el-form-item>
                </el-col>


              </el-row>
              <el-row justify="end">
                <el-button type="primary" @click="getData('search')">查询</el-button>
                <el-button @click="getData('reset')">重置</el-button>
              </el-row>
            </el-form>
          </template>
          <!-- 字段添加 -->
          <template v-slot:edit>
            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_SIGN:TCL:EXPORT'" title="下载TCL签约列表"
              @click="btnDown('tcl')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_SIGN:TCL:EXPORT'" title="查看下载TCL签约列表"
              @click="btnDownList('tcl')"></el-button>

            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_SIGN:HHT:EXPORT'" title="下载火火兔签约列表"
              @click="btnDown('HHT')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_SIGN:HHT:EXPORT'" title="查看下载火火兔签约列表"
              @click="btnDownList('HHT')"></el-button>

            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_SIGN:JXW:EXPORT'" title="下载九学王签约列表"
              @click="btnDown('JXW')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_SIGN:JXW:EXPORT'" title="查看下载九学王签约列表"
              @click="btnDownList('JXW')"></el-button>

            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_SIGN:YK:EXPORT'" title="下载优酷签约列表"
              @click="btnDown('YouKu')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_SIGN:YK:EXPORT'" title="查看下载优酷签约列表"
              @click="btnDownList('YouKu')"></el-button>

            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_SIGN:NG:EXPORT'" title="下载南瓜签约列表"
              @click="btnDown('NanGuaDianYing')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_SIGN:NG:EXPORT'" title="查看下载南瓜签约列表"
              @click="btnDownList('NanGuaDianYing')"></el-button>

            <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_SIGN:KEEP:EXPORT'" title="下载Keep签约列表"
              @click="btnDown('Keep')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_SIGN:KEEP:EXPORT'" title="查看下载Keep签约列表"
              @click="btnDownList('Keep')"></el-button>

              <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_SIGN:CLHK:EXPORT'" title="下载长龙航空签约列表"
              @click="btnDown('ChangLongHangKong')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_SIGN:CLHK:EXPORT'" title="查看下载长龙航空签约列表"
              @click="btnDownList('ChangLongHangKong')"></el-button>

              <el-button :icon="Download" v-permission="'ASSOCIATE_MEMBER_SIGN:XMLY:EXPORT'" title="下载喜马拉雅签约列表"
              @click="btnDown('Himalaya')"></el-button>
            <el-button :icon="List" v-permission="'ASSOCIATE_MEMBER_SIGN:XMLY:EXPORT'" title="查看下载喜马拉雅签约列表"
              @click="btnDownList('Himalaya')"></el-button>


            <DropItem v-model:table-prop="tableProp"></DropItem>
          </template>
        </searchPanel>
      </div>
      <div class="card-2">
        <!-- table数据 -->
        <OnlyTable ref="orderTable" class="card-2" :tableProps="tableProp" :pageTotal="pageParams.total"
          @get-page="handPage" :tableData="pageParams.tableData" :tableHeight="pageParams.tableHeight"
          :loading="pageParams.loadIng">
         
        </OnlyTable>
      </div>
    </el-card>

    <downList ref="downListRef" @flash="btnDownList1"></downList>

  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia"
import { onMounted } from "vue";
import { ElMessage } from "element-plus"

import _ from "lodash"
import { useCustomMenuStore } from "@/store/customMenu"
import { orderListPageStore } from "./pageStore"
import { Download, List } from '@element-plus/icons-vue'
import { exportAssociateMemberOrderApiPost } from "@/api/fileDown"
import { useComListData } from "@/store/list"
import { getNowDay } from '@/utils/index'
const { listCollect ,getProListAll} = useComListData()
const { getData1, timeChange, handPage } = orderListPageStore()
const {  tableProp, listSearch, pageParams, operateTime} = storeToRefs(orderListPageStore())
const {  getKey } = storeToRefs(useCustomMenuStore())
const selectTitle = ref<any>([])
const orderTable = ref()

const downListRef = ref<{ show: (title: string, row?: any) => void }>()
// 订单状态枚举 
const orderProcessStatus1 = ref<any>({
  "1": "初始",
  "2": "签约",
  "3": "解约"
})
onMounted(() => {
  selectTitle.value = tableProp.value.propsList.filter(it => it.hidden && it.label != "操作").map(item => item.prop)
  const { startOfDay, endOfDay } = getNowDay()
  if (!operateTime.value) operateTime.value = []

  operateTime.value.push(startOfDay)
  operateTime.value.push(endOfDay)
  listSearch.value.condition.orderTimeStart = startOfDay
  listSearch.value.condition.orderTimeEnd = endOfDay
  listSearch.value.condition.supplierCode = getKey
  listSearch.value.condition.orderStatusList = []
  listSearch.value.condition.orderStatusList.push('2')

  getData1('reset')

  getProListAll({})

})

const btnDown = async (type: string) => {
  try {
    const res = await exportAssociateMemberOrderApiPost({ condition: listSearch.value.condition })
    if (res.code == 20000) {
      ElMessage({
        type: "success",
        message: "下载成功 请查看下载列表 未出现下载数据 可等待在刷新下载列表！"
      })
    }
  } catch (error) {
    ElMessage({
      type: "error",
      message: "下载失败 请稍后再试！"
    })
  }
}
const btnDownList1 = () => {

  if (listSearch.value.condition.supplierCode == 'TCL') {
    btnDownList('tcl')
  } else if (listSearch.value.condition.supplierCode == 'HuoHuoTu') {
    btnDownList('HHT')
  } else if (listSearch.value.condition.supplierCode == 'JiuXueWang') {
    btnDownList('JXW')
  }else if (listSearch.value.condition.supplierCode == 'YouKu') {
    btnDownList('YouKu')
  }else if (listSearch.value.condition.supplierCode == 'NanGuaDianYing') {
    btnDownList('NanGuaDianYing')
  }else if (listSearch.value.condition.supplierCode == 'Keep') {
    btnDownList('Keep')
  }else if (listSearch.value.condition.supplierCode == 'ChangLongHangKong') {
    btnDownList('ChangLongHangKong')
  }else if (listSearch.value.condition.supplierCode == 'Himalaya') {
    btnDownList('Himalaya')
  }
}
const btnDownList = (type: string) => {
  if (type == 'tcl') {
    downListRef.value?.show('TCL签约下载列表', 'associateMemberOrder')

  } else if (type == 'HHT') {
    downListRef.value?.show('火火兔签约下载列表', 'associateMemberOrder')

  } else if (type == 'JXW') {
    downListRef.value?.show('九学王签约下载列表', 'associateMemberOrder')
  }else if (type == 'YouKu') {
    downListRef.value?.show('优酷联合会员签约下载列表', 'associateMemberOrder')
  }else if (type == 'NanGuaDianYing') {
    downListRef.value?.show('南瓜联合会员签约下载列表', 'associateMemberOrder')
  }else if (type == 'Keep') {
    downListRef.value?.show('Keep联合会员签约下载列表', 'associateMemberOrder')
  }else if (type == 'ChangLongHangKong') {
    downListRef.value?.show('长龙航空联合会员签约下载列表', 'associateMemberOrder')
  }else if (type == 'Himalaya') {
    downListRef.value?.show('喜马拉雅联合会员签约下载列表', 'associateMemberOrder')
  }
}

const getData = (type: string) => {
  if (type == 'reset') {
    // 清空时间
    listSearch.value.condition.orderTimeStart = null
    listSearch.value.condition.orderTimeEnd = null
    listSearch.value.condition.orderStatus = null
    operateTime.value = []
    orderTable.value.initPagination()
  }
  getData1(type)
}


</script>

<style scoped lang="scss">
.tcl-orderList {
  height: calc(100vh - 156px);

  .card-com {
    display: flex;
    flex-direction: column;
    // height: 100%;

    .card-2 {
      flex-grow: 1;
    }
  }
}
</style>